<template>
  <div class="loading">
    <div class="loading-bar">
      <div :style="'width:'+loadingWidth+'%;transition: all '+time+'s;'"></div>
    </div>
    <div class="cover" v-if="loading"></div>
  </div>
</template>

<script>
// import { formatDate } from '@/utils'
export default {
  data: () => ({
    loading: false,
    startTime: 0,
    time: 0,
    loadingWidth: 0
  }),
  methods: {
    start () {
      this.startTime = new Date().getTime()
      this.loading = true
      this.loadingWidth = 0
    },
    finish () {
      this.time = (new Date().getTime() - this.startTime) / 1000
      this.loading = false
      this.loadingWidth = 100
    }
  }
}
</script>

<style scoped lang="scss">
.loading-bar {
  > div {
    height: 100%;
    background-color: blue;
  }
  position: fixed;
  top: 0;
  left: 0;
  height: 8px;
  width: 100%;
  z-index: 2000;
}
.cover {
  position: absolute;
  width: 100%;
  height: 100vh;
  background-color: red;
  z-index: 1500;
}
</style>
